<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入cesiumjs库 -->
    <script src="../lib/cesium/Cesium.js"></script>
    <title>Document</title>
</head>
<style>
    /* 引入cesium widget样式 */
    @import url(../lib/cesium/Widgets/widgets.css);
        html, body, #cesiumContainer {
            width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
        }
</style>
<body>
    <!-- 地图容器 -->
    <div id="cesiumContainer"></div>
    <script src="app.js"></script>
</body>
<script>
    let viewer = new Cesium.Viewer('cesiumContainer', {
        geocoder: false, // 搜地理位置搜索工
        // homeButton: false, // 返回首页按钮
        sceneModePicker: false, // 2D 3D切换按钮
        baseLayerPicker: false, // 底图切换按钮
        navigationHelpButton:false, // 帮助按钮
        animation: false, // 左下角动画面板
        timeline: false, // 时间轴
        fullscreenButton: false, // 全屏按钮
    });
    // 隐藏logo
  viewer.cesiumWidget.creditContainer.style.display = "none";
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiN2ZlMWExNC04NjRlLTQzMTQtYmI2MS03M2NiN2Q0MjAwYTciLCJpZCI6ODYzNjIsImlhdCI6MTY0Nzc1NjgxNX0.UB9DEHTYlzJ-1N1XF8rH7uGEsw8W5nlMZuz-LTVizb8';

    // var boxEntity = viewer.entities.add({
    //   position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    //   box: {
    //     dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
    //     material: new Cesium.ColorMaterialProperty(Cesium.Color.RED.withAlpha(0.5)),
    //   }
    // });

    // boxEntity.box.material = new Cesium.ImageMaterialProperty({
    //   image: "",
    //   fabric: {
    //     type: "Image",
    //     uniforms: {
    //       image: "",
    //       color: new Cesium.Color(1.0, 1.0, 1.0, 0.5)
    //     },
    //     source: new Cesium.ConstantProperty(`
    //       uniform sampler2D image;
    //       uniform vec4 color;
    //       vec4 toCenter3D(vec3 p) {
    //         vec3 positionToEyeEC = czm_inverseModelView * vec4(p, 1.0);
    //         vec3 normalizedPositionToEyeEC = normalize(positionToEyeEC);
    //         float normalizedMagnitude = 0.5 * (normalizedPositionToEyeEC.z + 1.0);
    //         float gradient = mix(color.r, color.b, normalizedMagnitude);
    //         return vec4(gradient, gradient, gradient, color.a);
    //       }
    //       czm_material czm_getMaterial(czm_materialInput materialInput) {
    //         czm_material material = czm_getDefaultMaterial(materialInput);
    //         vec2 st = materialInput.st;
    //         vec4 color = texture2D(image, st);
    //         material.diffuse = color.rgb * material.diffuse;
    //         material.alpha = color.a * material.alpha;
    //         return material;
    //       }
    //     `)
    //   },
    //   transparent: true
    // });

    // viewer.zoomTo(boxEntity);

     var geometry = new Cesium.BoxGeometry({
      vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
      maximum: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
      minimum: new Cesium.Cartesian3(-200000.0, -200000.0, -200000.0),
    });

    var instance = new Cesium.GeometryInstance({
      geometry: geometry,
      attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
      }
    });

    viewer.scene.primitives.add(
      new Cesium.Primitive({
        geometryInstances: instance,
        appearance: new Cesium.PerInstanceColorAppearance({
          closed: true,
          translucent: false,
          vertexShaderSource: `
            attribute vec4 position3DHigh;
            attribute vec4 position3DLow;
            attribute vec3 normal;
            attribute vec4 st;
            attribute vec4 color;
            out vec4 v_color;
            void main() {
              vec4 p = czm_computePosition();
              v_color = czm_octDecode(vec2(normal.x, normal.y));
              v_color = vec4(mix(color.rgb, vec3(0.0, 0.0, 1.0), (p.z+200000.0)/400000.0), color.a);
              gl_Position = czm_modelViewProjectionRelativeToEye * p;
            }`,
          fragmentShaderSource: `
            in vec4 v_color;
            out vec4 FragColor;
            void main() {
              FragColor = czm_gammaCorrect(v_color);
            }`
        })
      })
    );

    viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
</script>
</html>